<template>
    <div>
        <!--pc端 -->
        <div class="box show-pc"
            style=" background-color:var(--color-bg) ;  box-shadow: var(--color-shadow) 0 2px 10px ;">
            <div class="nb-head-layout">
                <div>
                    <HeadLogo></HeadLogo>
                </div>
                <div style="margin-left: 1.4vw;">
                    <CategoryMenu :activeKey="activeKey" @menuClick="handleMenuClick"></CategoryMenu>
                </div>
                <div>
                    <HeadSearch></HeadSearch>
                </div>
                <div>
                    <HeadRightMenu :current="activeKey" @itemClick="handleMenuClick"></HeadRightMenu>
                </div>
                <div>
                    <HeadTheme></HeadTheme>
                </div>
                <div>
                    <HeadUserInfo></HeadUserInfo>
                </div>
            </div>
        </div>

        <!--手机端 -->
        <div class="show-wap">

            <div style="width: 100%;background-color: var(--color-bg);  ">
                <div class="wap-head">
                    <div>
                        <HeadLogo></HeadLogo>
                    </div>
                    <div style="width: 70%;">
                        <CategoryMenu :activeKey="activeKey" @menuClick="handleMenuClick"></CategoryMenu>
                    </div>
                    <div>
                        <HeadTheme></HeadTheme>
                    </div>
                </div>


            </div>


            <div>
                <foot></foot>
            </div>

        </div>


    </div>



</template>

<script setup name="PCHeadLayout">
import HeadLogo from './HeadLogo.vue';
import CategoryMenu from './CategoryMenu.vue';
import HeadSearch from './HeadSearch.vue';
import HeadRightMenu from './HeadRightMenu.vue';
import HeadTheme from './HeadTheme.vue';
import HeadUserInfo from './HeadUserInfo.vue';
import foot from './wap/foot.vue';
import { ref } from 'vue';


const activeKey = ref('');
const handleMenuClick = (key) => {
    activeKey.value = key;
};





</script>

<style lang="less" scoped>
.box {
    background-color: #fff;
}

.nb-head-layout {
    height: 4.3vw;
    width: 95.83333333333334vw;
    margin: 0 auto;
    display: flex;
    align-items: center;

}


// 手机端样式
.wap-head {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    align-items: center;
    z-index: 100;

}
</style>